<template>
  <div class="box">
    <div class="left">
      <el-card class="cebianlan">
        <el-tree
          :data="data"
          :props="Props"
          show-checkbox
          node-key="id"
          @node-click="handleNodeClick"
        >
        </el-tree>
      </el-card>
    </div>
    <div class="right">
      <el-card class="box-card">
        <div slot="header">
          <span style="font-size: 16px">机构信息</span>
        </div>
        <div class="text">
          <el-form label-width="100px" :model="Form">
            <el-row style="display: flex">
              <el-form-item label="机构编号" style="font-weight: 800">
                <el-input
                  style="width: 200px"
                  v-model="Form.id"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item
                label="机构名称"
                style="margin-left: 20px; font-weight: 800"
              >
                <el-input
                  style="width: 200px"
                  v-model="Form.name"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item
                label="机构类型"
                style="margin-left: 20px; font-weight: 800"
              >
                <el-select v-model="Form.type" placeholder="请选择" disabled>
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="机构地址" style="font-weight: 800">
                <el-select
                  style="width: 250px; margin-right: 10px"
                  v-model="Form.province.name"
                  :disabled="isok"
                  @change="changesheng"
                >
                  <el-option
                    v-for="item in province"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option
                ></el-select>
                <el-select
                  style="width: 250px; margin-right: 10px"
                  v-model="Form.city.name"
                  :disabled="isok"
                  @change="changeshi"
                >
                  <el-option
                    v-for="item in city"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option
                ></el-select>
                <el-select
                  style="width: 250px; margin-right: 10px"
                  v-model="Form.county.name"
                  :disabled="isok"
                >
                  <el-option
                    v-for="item in county"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option
                ></el-select>
              </el-form-item>
            </el-row>
            <el-row style="display: flex">
              <el-form-item label="详细地址" style="font-weight: 800">
                <el-input
                  style="width: 200px"
                  v-model="Form.address"
                  :disabled="isok"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="经度"
                style="margin-left: 20px; font-weight: 800"
              >
                <el-input
                  style="width: 200px"
                  v-model="Form.longitude"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item
                label="纬度"
                style="margin-left: 20px; font-weight: 800"
              >
                <el-input
                  style="width: 200px"
                  v-model="Form.latitude"
                  disabled
                ></el-input>
              </el-form-item>
            </el-row>
            <el-row style="display: flex">
              <el-form-item label="机构负责人" style="font-weight: 800">
                <el-input
                  style="width: 200px"
                  v-model="Form.managerName"
                  :disabled="isok"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="机构电话"
                style="margin-left: 20px; font-weight: 800"
              >
                <el-input
                  style="width: 200px"
                  v-model="Form.phone"
                  :disabled="isok"
                ></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-button
                type="danger"
                style="margin-left: 450px"
                @click="bianji"
                v-if="isok"
                >编辑</el-button
              >
              <el-button
                type="success"
                v-else
                style="margin-left: 450px"
                @click="wancheng"
                >保存</el-button
              >
            </el-row>
          </el-form>
        </div>
      </el-card>
      <el-card style="margin-top: 20px; height: 581px">
        <div slot="header">
          <span style="font-size: 16px">员工信息</span>
        </div>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column label="序号" type="index"> </el-table-column>
          <el-table-column prop="userId" label="员工编号"> </el-table-column>
          <el-table-column prop="name" label="员工姓名"></el-table-column>
          <el-table-column prop="mobile" label="手机号"></el-table-column>
          <el-table-column
            prop="agency.name"
            label="所属机构"
          ></el-table-column>
          <el-table-column prop="account" label="系统账户"></el-table-column>
          <el-table-column
            prop="stationName"
            label="系统角色"
          ></el-table-column>
          <el-table-column prop="status" label="账号状态">
            <div
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <div
                style="
                  width: 5px;
                  height: 5px;
                  background-color: #1dc779;
                  border-radius: 50%;
                  margin-right: 5px;
                "
              ></div>
              <span>正常</span>
            </div>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import {
  gettreeapi,
  getyuangongapi,
  getBusinessApi,
  getfenyeapi,
  getshengapi,
  getshiapi,
  getquapi,
  getbaocun,
} from "@/api/wangdian";
export default {
  data() {
    return {
      data: [],
      Props: {
        children: "children",
        label: "name",
      },
      page: 1,
      pageSize: 5,
      agencyId: "",
      value: {},
      tableData: [],
      Form: {
        address: "", //详细地址
        id: "", //机构编号
        longitude: "", //精度
        latitude: "", //纬度
        name: "", //机构名称
        managerName: "", //机构负责人名称
        phone: "", //电话
        city: {},
        county: {},
        province: {},
        type: "",
      },
      options: [
        {
          label: "一级转运中心",
          value: 1,
        },
        {
          label: "二级转运中心",
          value: 2,
        },
        {
          label: "营业部",
          value: 3,
        },
      ],
      province: [],
      county: [],
      city: [],
      total: 0,
      isok: true,
    };
  },
  //生命周期钩子
  created() {
    this.getwangdian();
    this.getyuangong();
  },
  methods: {
    async getwangdian() {
      const res = await gettreeapi();
      // console.log(JSON.parse(res.data));
      this.data = JSON.parse(res.data);
    },
    //点击列表触发事件
    handleNodeClick(oo) {
      // console.log(oo);
      this.getyuangong(oo.id);
      this.getjigou(oo.id);
      this.getshengji();
    },
    //获取员工
    async getyuangong(id) {
      const res = await getyuangongapi({
        page: this.page,
        pageSize: this.pageSize,
        agencyId: id,
      });
      const res2 = await getfenyeapi({
        page: this.page,
        pageSize: this.pageSize,
        agencyId: id,
      });
      this.total = +res2.data.counts;
      // console.log(res2);
      // console.log(res);
      this.tableData = res.data.items;
    },
    //获取机构
    async getjigou(id) {
      const res1 = await getBusinessApi(id);
      await this.getshiji({
        parentId: res1.data.city.id,
      });
      await this.getquji({
        parentId: res1.data.county.id,
      });
      // console.log(res1);
      this.Form = res1.data;
    },
    //更新分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getyuangong();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getyuangong();
    },
    //编辑按钮
    bianji() {
      this.isok = !this.isok;
    },
    //完成按钮
    async wancheng() {
      this.isok = !this.isok;
      const res = await getbaocun(this.Form);
      console.log(res);
      //  this.Form = res.data
      this.$message.success("保存成功");
    },
    // 获取省级
    async getshengji() {
      const res = await getshengapi();
      console.log(res);
      this.province = res.data;
    },
    //获取市级
    async getshiji(id) {
      const res = await getshiapi(id);
      console.log(res);
      this.city = res.data;
    },
    //获取区级
    async getquji(id) {
      const res = await getquapi(id);
      console.log(res);
      this.county = res.data;
    },
    //修改市
    async changesheng(a) {
      // console.log(a);
      const res = await getshiapi({
        parentId: a,
      });
      console.log(res);
      this.city = res.data;
    },
    //修改村
    async changeshi(a) {
      const res = await getquapi({
        parentId: a,
      });
      this.county = res.data;
    },
  },
};
</script>
<style lang="scss" scoped>
.cebianlan {
  width: 214px;
  height: 985px;
}
.box {
  display: flex;
}
.right {
  margin-left: 20px;
}
.box-card {
  width: 982px;
  height: 381px;
}
</style>